<!DOCTYPE html>
<html>
<head>
	<title>SoundJS demo: Using PreloadJS</title>
	<link href="../_shared/demo.css" rel="stylesheet" type="text/css">
	<script src="https://code.createjs.com/soundjs-0.6.2.min.js"></script>
	<script src="https://code.createjs.com/preloadjs-0.6.2.min.js"></script>

	<script>

		function load() {
            // Update the UI
            document.getElementById("display").innerText = "Loading...";
            document.getElementById("loadBtn").disabled = "disabled";

            var queue = new createjs.LoadQueue();
			createjs.Sound.alternateExtensions = ["mp3"];
            queue.installPlugin(createjs.Sound);
            queue.addEventListener("fileload", handleFileLoad);
            queue.addEventListener("complete", handleComplete);
            queue.loadManifest([
                {id:"mySound", src:"../../_assets/audio/M-GameBG.ogg"},
                {id:"mySound2", src:"../../_assets/audio/Thunder1.ogg"}
            ]);
		}

        function handleFileLoad(event) {
            // Update the UI
            document.getElementById("display").innerHTML += "<br/>Loaded: " + event.item.id
                    + " using " + createjs.Sound.activePlugin.toString();
            document.getElementById("stopBtn").disabled = "";

            // Play the loaded sound
            createjs.Sound.play(event.item.id);
        }

        function handleComplete(event) {
            document.getElementById("display").innerHtml += "<br/>Loading Complete!";
        }

	</script>
</head>
<body>
    <input id="loadBtn" type="button" value="Begin Loading" onclick="load()"/>
    <input id="stopBtn" type="button" value="Stop Playing" onclick="createjs.Sound.stop();" disabled="disabled" />
	<label id="display">Waiting for User Input. Click "Begin Loading".</label>
</body>
</html>
